{%- liquid
  case section.settings.color_schema
    when 'primary'
      assign background_color = 'bg-primary'
    when 'secondary'
      assign background_color = 'bg-secondary'
    when 'inverse'
      assign background_color = 'bg-inverse'
    when 'white'
      assign background_color = 'bg-white'
    when 'black'
      assign background_color = 'bg-black'
  endcase

  case section.settings.text_color
    when 'white'
      assign text_color = 'text-body-inverse'
    else
      assign text_color = ''
  endcase

  assign sectionsList = ''
  for block in section.blocks
    if block.settings.section_number != blank
      if sectionsList != blank
        assign sectionsList = sectionsList | append: '&' | append: block.settings.section_number
      else
        assign sectionsList = block.settings.section_number
      endif
    endif
  endfor
-%}

<div class="{{ background_color }}">
  <div class="container">
    <div class="content-inner d-flex">
      <ul class="nav tab-list mx-auto text-nowrap flex-nowrap as-tabs" data-sectionlist="{{ sectionsList }}">
        {%- for block in section.blocks -%}
          <li class="nav-item d-flex" role="presentation">
            <a class="as-tab-item tab-item py-3 {% if forloop.first %}active ms-0{% elsif forloop.last %}me-0{% endif %} cursor-pointer {{ text_color }}" id="cate-tab-{{ forloop.index }}" data-sections="{{ block.settings.section_number }}">
              {{ block.settings.tab_label }}
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>

{% schema %}

{
  "name": "Nav bar",
  "class": "as-nav-bar nav-bar position-sticky",
  "tag": "section",
  "settings": [
    {
      "type": "select",
      "id": "color_schema",
      "label": "Background color",
      "options": [
        {
          "value": "primary",
          "label": "Primary"
        },
        {
          "value": "secondary",
          "label": "Secondary"
        },
        {
          "value": "inverse",
          "label": "Inverse"
        },
        {
          "value": "white",
          "label": "White"
        },
        {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    },
    {
      "type": "select",
      "id": "text_color",
      "label": "Text color",
      "options": [
        {
          "value": "white",
          "label": "White"
        }, {
          "value": "black",
          "label": "Black"
        }
      ],
      "default": "white"
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "label": "Tab label",
          "type": "text",
          "id": "tab_label"
        }, 
        {
          "type": "text",
          "id": "section_number",
          "label": "Section number",
          "info": "Please enter 3 if you want to anchor to the third section."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Nav bar"
    }
  ]
}

{% endschema %}
